<script setup>
import { More, Picture, VideoCamera, Microphone, Location, User, Clock, PriceTag, FolderOpened } from "@element-plus/icons-vue"
import { computed } from 'vue'
import { useNote } from '@/stores/note'
import dayjs from 'dayjs'
import EditImgs from './comps/EditImgs.vue'
import EditVideos from './comps/EditVideos.vue'
import EditFiles from './comps/EditFiles.vue'
import EditPeople from './comps/EditPeople.vue'
import EditMap from './comps/EditMap.vue'
import EditTags from './comps/EditTags.vue'
import EditInfo from './comps/EditInfo.vue'

const Note = useNote()
const isLoadRls = ref(false) // 发布按钮是否正在加载
const uploadInfo = ref({ percent: 0, speed: 0 }) // 上传进度条

// 正在编辑的临时Note数据
const editNote = reactive({ noteContent: "" })

// 返回editItem是否有某个键 有返回true
const isHaveItem = computed(() => name => Object.keys(editNote).indexOf('note' + name) > -1)

// 点击上面按钮，添加修改项到editItem
const addItem = (name) => {
  let aName = 'note' + name
  if (!isHaveItem.value(name)) {
    if (name === 'Time') editNote.noteTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
    else editNote[aName] = []
  }
  else delete editNote[aName]
}

const releaseNote = () => {
  // 先检查
  isLoadRls.value = true
  if (!editNote.noteContent) {
    ElMessage("你还没输入东西呢")
    return isLoadRls.value = false
  }

  Note.releaseNote(editNote, () => {
    // 清空editnote
    for (let key in editNote) delete editNote[key]
    editNote.noteContent = ''
    // 发送按钮可用
    isLoadRls.value = false
  }, uploadInfo)
}
</script>

<template>
  <!-- 顶部的note编辑组件 -->
  <div class="editMdoel" :class="{ disabled: isLoadRls }">
    <!-- {{ editNote }} -->
    <el-input v-model="editNote.noteContent" :autosize="{ minRows: 3 }" type="textarea" placeholder="记录内容"
      style="margin-bottom: 10px" />

    <!-- 添加上传项图标 -->
    <div class="icons">
      <Clock class="icon" :class="isHaveItem('Time') && 'icon-selected'" @click="addItem('Time')" />
      <Picture class="icon" :class="isHaveItem('Imgs') && 'icon-selected'" @click="addItem('Imgs')" />
      <VideoCamera class="icon" :class="isHaveItem('Videos') && 'icon-selected'" @click="addItem('Videos')" />
      <Microphone class="icon" :class="isHaveItem('Audios') && 'icon-selected'" @click="addItem('Audios')" />
      <FolderOpened class="icon" :class="isHaveItem('Files') && 'icon-selected'" @click="addItem('Files')" />
      <Location class="icon" :class="isHaveItem('Location') && 'icon-selected'" @click="addItem('Location')" />
      <User class="icon" :class="isHaveItem('People') && 'icon-selected'" @click="addItem('People')" />
      <PriceTag class="icon" :class="isHaveItem('Tags') && 'icon-selected'" @click="addItem('Tags')" />
      <More class="icon" :class="isHaveItem('Info') && 'icon-selected'" @click="addItem('Info')" />

      <!-- 发布按钮 -->
      <el-button type="primary" style="float: right;" @click="releaseNote" :loading="isLoadRls">
        {{ isLoadRls ? '' : '发布' }}
      </el-button>
    </div>

    <el-progress v-if="isLoadRls" :percentage="uploadInfo.percent"
      :format="() => uploadInfo.percent + '% ' + uploadInfo.speed + 'Mb/s'" />

    <div class="items">
      <el-date-picker v-if="editNote.noteTime" v-model="editNote.noteTime" type="datetime" :editable="false"
        :clearable="false" format="YYYY-MM-DD HH:mm" value-format="YYYY-MM-DD HH:mm:ss" />
      <EditImgs v-if="editNote.noteImgs" :editNote="editNote" :setIsLoad="a => isLoadRls = a" />
      <EditVideos v-if="editNote.noteVideos" :editNote="editNote" />
      <EditFiles v-if="editNote.noteFiles" :editNote="editNote" />
      <EditMap v-if="editNote.noteLocation" :note="editNote" />
      <EditPeople v-if="editNote.notePeople" :note="editNote" />
      <EditTags v-if="editNote.noteTags" :note="editNote" />
      <EditInfo v-if="editNote.noteInfo" :note="editNote" />
    </div>

  </div>
</template>

<style scoped lang="less">
// 编辑发布模块
.editMdoel {
  border: 1px dashed var(--el-border-color-light);
  border-radius: 5px;
  padding: 5px;
  margin-bottom: 5px;

  // 上传项图标
  .icons {
    // margin-bottom: 5px;

    .icon {
      margin-top: 5px;
      margin-right: 3px;
      height: 25px;
      color: var(--el-text-color-primary);
    }

    .icon-selected {
      color: var(--el-color-primary);
    }

  }
}

// 编辑不可操作时，如上传中
.disabled {
  pointer-events: none;
}

.items {
  ::v-deep(>div) {
    margin-top: 5px;
  }
}
</style>